// import React from 'react';
// import ReactDOM from 'react-dom';

import React from './lib/react';
import ReactDOM from './lib/react-dom';

/**
 * React.useState:
 * 1, 通过在函数组件里调用它来给组件添加一些内部 state,React 会在重复渲染时保留这个 state
 * 2, useState 会返回一对值：当前状态和一个让你更新它的函数，你可以在事件处理函数中或其他一些地方调用这个函数。它类似 class 组件的 this.setState，但是它不会把新的 state 和旧的 state 进行合并
 * 3, useState 唯一的参数就是初始 state
 * 4, 返回一个 state，以及更新 state 的函数
      在初始渲染期间，返回的状态 (state) 与传入的第一个参数 (initialState) 值相同
      setState 函数用于更新 state。它接收一个新的 state 值并将组件的一次重新渲染加入队列
 * 
 */

function App() {
  const [number1, setNumber1] = React.useState(5);
  const [number2, setNumber2] = React.useState(0);

  const handleClick1 = () => setNumber1(number1 + 1);
  const handleClick2 = () => setNumber2((state) => state + 1);

  return (
    <div>
      <p>{number1}</p>
      <p>{number2}</p>
      <button onClick={handleClick1}>+</button>
      <button onClick={handleClick2}>+</button>
    </div>
  )
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);


// 注意如果要使用老的把 jsx 编译成 React.createElement(), 必须在启动项中设置 cross-env DISABLE_NEW_JSX_TRANSFORM=true
// 如： "start": "cross-env DISABLE_NEW_JSX_TRANSFORM=true react-scripts start",